import React, { useState } from 'react';
import { Button, Input } from 'antd';
import Audio from '@/components/Audio';
import './index.scss';

interface VoiceInputProps {
  loading: boolean;
  onSend: (value: string) => void;
  layout: any;
}

function VoiceInput({ loading, onSend, layout }: VoiceInputProps) {
  const [inputValue, setInputValue] = useState('');

  const { w, h, textSize } = layout;

  const voiceInputW = Math.ceil(((1760 - 340) * w) / 1760) + 'px';

  const voiceInputH = Math.ceil((240 * h) / 3840) + 'px';

  const voiceInputMr = Math.ceil((57 * w) / 2160) + 'px';

  const buttonH = Math.ceil((191 * h) / 3840) + 'px';

  const buttonW = Math.ceil((320 * w) / 1760) + 'px';

  const buttonMr = Math.ceil((w / (2160 / 20))); + 'px'

  const inputBorderRadius = Math.ceil((40 * w) / 2160) + 'px';

  const inputPaddingLeft = inputBorderRadius;

  // console.log(inputW, w, 'wwwww');

  const onTextChange = (value: string) => {
    setInputValue(value);
  };
  const handleSend = () => {
    console.log(inputValue, 'sendssss');
    onSend?.(inputValue);
    setInputValue('');
  };

  return (
    <div className="inputWrapper">
      <div className="inputContainer" style={{ width: voiceInputW, marginLeft: '20px', marginRight: '20px' }}>
        <div
          className="inputBox"
          style={{ marginRight: voiceInputMr, height: voiceInputH, borderRadius: inputBorderRadius }}
        >
          <Input
            value={inputValue}
            style={{ border: 'none', boxShadow: 'none', fontSize: textSize, paddingLeft: inputPaddingLeft }}
            placeholder="输入问题, 快来和我互动吧"
            onChange={(e) => setInputValue(e.target.value)}
          />
          <Button
            style={{
              fontSize: textSize,
              marginRight: buttonMr,
              height: buttonH,
              width: buttonW,
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              borderRadius: inputBorderRadius,
            }}
            type="primary"
            size="large"
            onClick={handleSend}
          >
            {loading ? 'Thinking' : '发送'}
          </Button>
        </div>
        <div className="audioBox">
          <Audio width={voiceInputH} onTextChange={onTextChange} handleSend={handleSend} />
        </div>
      </div>
    </div>
  );
}

export default VoiceInput;
